<template>
  <a-card :bordered="false" :title="$route.meta.title" :bodyStyle="{ padding: '0 12px' }">
    <a-table rowKey="id" size="middle" :loading="loading" :columns="columns" :dataSource="dataSource" :pagination="pagination" @change="tableChange">
      <a-form slot="title" :form="searchForm" @submit="searchSubmit" layout="inline">
        <a-form-item label="用户姓名">
          <a-input allowClear :maxLength="18" autocomplete="off" placeholder="请输入用户姓名" v-decorator="['name']" />
        </a-form-item>
        <a-form-item label="手机号码">
          <a-input allowClear :maxLength="11" autocomplete="off" placeholder="请输入手机号" v-decorator="['phone']" />
        </a-form-item>
        <sjht-search-submit hide-reset />
      </a-form>
      <template slot="action" slot-scope="t, r">
        <a @click.stop="$refs.recharge.open(r)">充值</a>
      </template>
      <span slot="price" slot-scope="text" class="sjht-price" v-if="text >= 0">{{ text }}</span>
    </a-table>
    <recharge-form ref="recharge" @success="loadData" />
  </a-card>
</template>
<script>
import { table, tableAction, searchForm } from '../../utils/mixins'
import { PageList } from '../../api/user'
import RechargeForm from './modules/RechargeForm'
export default {
  name: 'StoreList',
  mixins: [table, tableAction, searchForm],
  components: { RechargeForm },
  data() {
    return {
      loadApi: PageList,
      columns: [
        { title: '操作', key: 'operation', width: 60, align: 'center', scopedSlots: { customRender: 'action' } },
        { title: 'ID', dataIndex: 'id', width: 60 },
        { title: '用户编号', dataIndex: 'code', width: 100 },
        { title: '用户姓名', dataIndex: 'name', width: 100 },
        { title: '手机号码', dataIndex: 'phone', width: 100 },
        { title: '登录次数', dataIndex: 'logins', width: 100, align: 'center' },
        { title: '余额', dataIndex: 'wallet', width: 75, align: 'center', scopedSlots: { customRender: 'price' } },
        { title: '创建时间', dataIndex: 'createTime', width: 145 },
        { title: '更新时间', dataIndex: 'updateTime' }
      ]
    }
  },
  mounted() {
    this.loadData()
  }
}
</script>